<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>忘记密码</title>
		
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/forgetPassword.css" />
		
	</head>

	<body>
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>

		<div class="content">
			<div class="container">
				<div class="row">
					<div class="col-sm-5 col-sm-offset-4 form-box">
						<div class="form-top text-center">
							<div class="text-center">
								<ul class="ui-step ui-step-3">
									<li class="step-active">
										<div class="ui-step-line"></div>
										<div class="ui-step-cont">
											<span class="ui-step-cont-number">1</span>
											<span class="ui-step-cont-text">输入用户名</span>
										</div>
									</li>
									<li class="step-end">
										<div class="ui-step-line"></div>
										<div class="ui-step-cont">
											<span class="ui-step-cont-number">2</span>
											<span class="ui-step-cont-text">找回方式</span>
										</div>
									</li>
									<li class="step-end">
										<div class="ui-step-line"></div>
										<div class="ui-step-cont">
											<span class="ui-step-cont-number">3</span>
											<span class="ui-step-cont-text">输入验证码</span>
										</div>
									</li>
									<li class="step-end">
										<div class="ui-step-line"></div>
										<div class="ui-step-cont">
											<span class="ui-step-cont-number">4</span>
											<span class="ui-step-cont-text">修改密码</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="register_content">
							<div class="col-sm-12 box1">
								<form id="validateform" name="phoneForm" method="post" class="form-horizontal" action="modifyPasswordr">
									<div class="col-lg-10 text-center float_margin">
										<div class="form-group box1_forget_title" >
											<span>请输入需要找回密码的用户名</span>
										</div>
										<div class="form-group box_common">
											<div class="col-sm-12">
												<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" />
											</div>
										</div>
										<div class="form-group">
											<div class="btn btn-primary col-xs-4 next next1">下一步</div>
										</div>
									</div>
								</form>
							</div>
							<div class="col-sm-12 text-center box2">
								<form id="form2" name="phoneForm" method="post" class="form-horizontal" action="">
									<div class="col-lg-10 text-center float_margin">
										<div class="form-group">
											<div class="col-lg-12 box2_email validatorMethod active">
												<span class="glyphicon glyphicon-envelope"></span><span id="email"><c:if test="${paccInofo.email!=null||paccInofo.email!=''}">${paccInofo.email}</c:if></span>
											</div>
											<div class="col-lg-12 box2_phone validatorMethod">
												<span class="glyphicon glyphicon-phone"></span><span id="telNum"><c:if test="${paccInofo.telNum!=null||paccInofo.telNum!=''}">${fn:substring(paccInofo.telNum,0,3)}</c:if></span>
											</div>
										</div>
										<div class="form-group">
											<div class="btn btn-primary col-xs-4 next  next2">下一步</div>
										</div>
									</div>
								</form>
							</div>
							<div class="col-sm-12 text-center box3">
								<form id="form3" name="phoneForm" method="post" class="form-horizontal" action="">
									<div class="col-lg-10 text-center float_margin">
										<div class="form-group" id="box3_validatorMethod">
											<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-envelope"></span></label>
											<div class="col-sm-10">
												<div class="input-group">
													<span><input type="text" class="form-control" readonly="readonly"  id="emailCode" placeholder="" /></span> 
													<span class="input-group-btn">
														<a  class="btn btn-primary getCode" href="javascript:void(0);" onclick='getValidateCode()'>
															获取验证码
														</a>
													</span>
												</div>
											</div>
										</div>
										<div class="form-group box_common">
											<label class="col-sm-2 control-label hidden-xs"></label>
											<div class="col-sm-10 padding_no">
												<input type="text" class="form-control" name="validatecode" id="validatecode" placeholder="请输入验证码" />
											</div>
										</div>
										<div class="form-group">
											<div class="btn btn-primary col-xs-4 next next3">下一步</div>
										</div>
									</div>
								</form>
							</div>
							<div class="col-sm-12  box4">
								<form id="phoneFormSave" name="phoneForm" method="post" class="form-horizontal" >
									<div class="col-lg-10 text-center float_margin">
										<div class="form-group box1_forget_title">
											<span>修改密码</span>
										</div>
										<div class="form-group box_common">
											<div class="col-lg-12">
											    <input type="hidden" name="username" id="uaccount"/>
											    <input type="hidden" name="pmodify" id="false"/>
												<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="输入密码" autocomplete="off"/>
											</div>
										</div>
										<div class="form-group box4_pa">
											<div class="col-lg-12">
												<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="确认密码" autocomplete="off"/>
											</div>
										</div>
										<div class="form-group">
											<button type="submit" class="btn btn-primary col-xs-4 next" >提交</button>
										</div>
									</div>
								</form>
							</div>
							<div class="col-sm-12  box5">
								<div class="col-lg-10 text-center float_margin">
									<div class="form-group box1_forget_title">
										<a href="${ctxf}/account/login.html">修改成功，请重新登录</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="form-bottom">
						

					</div>
				</div>
			</div>
		</div>

		<!--footer start-->
		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

		<!--footer end-->
	</body>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

	<script src="${ctxStatic}/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var emailNumber,emailValidator,telNumber;
		var validatorMethod = false; //验证方式 
		$(document).ready(function(){
			$('#phoneFormSave').bootstrapValidator({  
				 message: 'This value is not valid',
			        feedbackIcons: {
			            valid: '',
			            invalid: '',
			            validating: ''
			        },
			        fields: {   
			            'newPassword': {
			                validators: {
			                    notEmpty: {
			                        message: '密码不能为空！'
			                    },
			                    stringLength: {
			                        min: 6,
			                        max: 30,
			                        message: '密码长度必须在6到30位！'
			                    },
			                    regexp: {
			                        regexp: /^[A-Za-z0-9]+$/,
			                        message: '密码由数字和26个英文字母组成的字符串'
			                    }
			                }
			            },
			            'confirmPassword': {
			                validators: {
			                	notEmpty: {
			                        message: '密码不能为空！'
			                    },
			                    identical: {
			                        field: 'newPassword',
			                        message: '两次输入密码不一致'
			                    }
			                }
			            },
			        }
			}).on('success.form.bv', function (e) {
				e.preventDefault();
				modifyPassword();
    		})
    		
    		$(".next1").click(function() {
				$.ajax({
					type:"POST",
					url:"${ctxf}/account/validateuser",
					data:$('#validateform').serialize(),
					async:false,
					success:function(data){
						if(data.result == "200"){
							toastr.error('请输入用户名！',{timeOut: 5000});
						}else if(data.result == "201"){
							toastr.error('用户名不存在！',{timeOut: 5000});
						}else if(data.result!=201&&data.result!=200){
							if(data.result.email != null){
								emailValidator = data.result.email;
								emailNumber = data.result.email.split('@')[0];
							}
							if(data.result.telNum != null){
								telNumber = data.result.telNum;
							}
							if(emailNumber){
								$("#email").text(emailNumber.substring(0,3) + '****' + emailNumber.substring(emailNumber.length-4,3) + '@' + data.result.email.split('@')[1]);
							}else {$("#email").text('')}
							if(telNumber){
								$("#telNum").text(telNumber.substring(0,3) + '****' + telNumber.substring(data.result.telNum.length-4,3));
							}else {$("#telNum").text('')}
							$(".box1").css({"display": "none"});
							$(".box2").css({"display": "block"});
							$(".form-top ul li").removeClass("step-active");
							$(".form-top ul li:nth-child(1)").addClass("step-done");
							$(".form-top ul li:nth-child(2)").addClass("step-active");
						}
					}
				});
			});
			
			$('.validatorMethod').click(function(){
			    $(this).addClass('active').siblings().removeClass('active');
			    if($(this).is('.box2_phone')){
			    	validatorMethod = true;
			    }else{
			    	validatorMethod = false;
			    }
			    
			});
			$(".next2").click(function() {
				$("#emailCode").val($("#email").html());
				
				var _html = '';
				
				if(validatorMethod){
					if($("#telNum").html() == ""){
						toastr.error("手机号不存在！请选择其他方式！",{timeOut: 1000});
						return false;
					}else{
						_html = '<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-phone"></span></label>'+
						'<div class="col-sm-10">'+
							'<div class="input-group">'+
								'<span><input type="text" class="form-control" id="phoneCode" readonly="readonly"  placeholder="请输入手机号" /></span> '+
								'<span class="input-group-btn">'+
									'<a  class="btn btn-primary getCode" href="javascript:void(0);" onclick="getValidateCode()">'+
										'获取验证码'+
									'</a>'+
								'</span>'+
							'</div>'+
						'</div>';
						$("#box3_validatorMethod").empty();
						$("#box3_validatorMethod").append(_html);
						$("#phoneCode").val($("#telNum").html());
					}
				}else{
					if($("#email").html() == ""){
						toastr.error("邮箱不存在！请选择其他方式！",{timeOut: 1000});
						return false;
					}
				}
				$(".box2").css({"display": "none"});
				$(".box3").css({"display": "block"});
				
				
				$(".form-top ul li").removeClass("step-active");
				$(".form-top ul li:nth-child(2)").addClass("step-done");
				$(".form-top ul li:nth-child(3)").addClass("step-active");
			})
			
			$(".next3").click(function() {
				var vlicode = $("#validatecode").val();
				var valnum;
				var email = $("#emailCode").val();
				var phone = $("#phoneCode").val();
			
				if(email!=""&&email!=undefined){
					valnum=email;
				}
				if(phone!=""&&phone!=undefined){
					valnum=phone;
				}
				if(vlicode == ""){
					toastr.error("请输入验证码！",{timeOut: 1000});
					return false;
				}
				var success = false;
				var url;
				if(validatorMethod){
					url="${ctxf}/account/vlidateCode?verificationCode="+vlicode+"&valnum="+telNumber;
				}else{
					url="${ctxf}/account/vlidateCode?verificationCode="+vlicode+"&valnum="+emailValidator;
				}
				//验证验证码是否正确
				$.ajax({
					type:"POST",
					url:url,
					async:false,
					success:function(data){
						if(data.valid === 'true'){
							success = true;
						}else{
							toastr.error("验证码输入错误！",{timeOut: 1000});
						}
					}
				});
				if(success){
					$(".box3").css({"display": "none"});
					$(".box4").css({"display": "block"});
					$(".form-top ul li").removeClass("step-active");
					$(".form-top ul li:nth-child(3)").addClass("step-done");
					$(".form-top ul li:nth-child(4)").addClass("step-active");
				}else{
					return false;
				}
			})
			
    		
		})
		//获取验证码
		function getValidateCode(){
			var url;
			if(validatorMethod){
				url="${ctxf}/account/phoneOrEmailValidatecode?username="+telNumber;
			}else{
				url="${ctxf}/account/phoneOrEmailValidatecode?username="+emailValidator;
			}
			
			$.ajax({
				type:"POST",
				url:url,
				success:function(datae){
					 layer.msg("验证码已发送");
					 var remainTime = 60;
			 		 var intervalId = setInterval(function() {
			 			remainTime--;
			 			if(remainTime > 0) {
			 				$(".getCode").html("重新发送（" + remainTime + "）");
			 				$(".getCode").attr({"disabled":"disabled"});
			 			} else {
			 				clearInterval(intervalId);
			 				$(".getCode").html("获取验证码");
			 				$(".getCode").removeAttr("disabled");
			 			}
			 		}, 1000);
				}
			});
		}
		function modifyPassword() {
			if(validatorMethod){
				$("#uaccount").val(telNumber);
			}else{
				$("#uaccount").val(emailValidator);
			}
			
			$.ajax({
				type:"POST",
				url:"${ctxf}/account/resetPassword",
				data:$('#phoneFormSave').serialize(),
				async:true,
				success:function(data){
					debugger
					if(data.mresult == "200"){
						toastr.error("当前密码不能为空！",{timeOut: 5000});
					}else if(data.mresult == "201"){
						toastr.error("新密码输入不能不为空！",{timeOut: 5000});
					}else if(data.mresult == "202"){
						toastr.error("新密码和确认密码输入不一致！",{timeOut: 5000});
					}else if(data.mresult == "203"){
						toastr.success("修改密码成功！",{timeOut: 5000});
						$(".box4").css({"display": "none"});
						$(".box5").css({"display": "block"});
					}
				}
			});
		}
	</script>

</html>